<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .my-paragraph::before {
            content: "before/元素之前!";
            color: hotpink;
        }
        
        .my-paragraph::after {
            content: "after/元素之后!";
            color: steelblue;
        }
        
        .bookMark::before {
            content: "<<";
            color: #000000;
        }
        
        .bookMark::after {
            content: ">>";
            color: #000000;
        }
        
        .website::after {
            content: "-> [" attr(href) "]";
        }
    </style>
</head>

<body>
    <p class="my-paragraph">这是p标签里面的内容!</p>
    <p class="bookMark">javaScript高级程序设计</p>
    <a href="https://www.baidu.com/" class="website">百度地址</a>
</body>

</html>